<template>
  <div class="cate">
    <!-- 面包屑-->
    <breadview>
      <breaditem :to="'/'">首页</breaditem>
      <transition name="bread">
        <breaditem :key="sumlist && sumlist.id">{{
          sumlist && sumlist.name
        }}</breaditem>
      </transition>
    </breadview>
    <div class="swipers">
      <SwiperView> </SwiperView>
    </div>
    <quancate :list="sumlist.children"></quancate>
    <!-- <div v-if="lists"> -->
      <xifenbox
        :item="item"
        v-for="(item, key) in lists"
        :key="key"
      ></xifenbox>
    <!-- </div> -->

  </div>
</template>

<script>
import breadview from "../bread/breadview.vue";
import breaditem from "../bread/breaditem.vue";
import SwiperView from "../home/SwiperView.vue";
import quancate from "./quancate.vue";
import xifenbox from "./xifenbox.vue";
import { catelist } from "@/utils/Api/NavText";
export default {
  components: { breadview, breaditem, SwiperView, quancate, xifenbox },
  data() {
    return {
      newid: null,
      list: [],
      lists: [],
      name: "",
    };
  },
  methods: {
    async getlist() {
      let res = await catelist(this.newid);
      this.lists = res.result.children;
      this.name = res.result.name;
      // console.log(res.result.children);
    },
  },
  mounted() {},
  computed: {
    sumlist() {
      var arr = this.$store.state.nav.navigation.find((item) => {
        return item.id == this.newid;
      });
      return arr;
    },
  },
  watch: {
    $route: {
      handler(val) {
        this.newid = val.query.id;
      },
      deep: true,
      immediate: true,
    },
    newid: {
      handler(val) {
        if (val) {
          this.getlist();
        }
      },
      deep: true,
      immediate: true,
    },
  },
};
</script>

<style lang="scss" scoped>
.cate {
  width: 1240px;
  margin: auto;
}
.swipers {
  width: 1240px;
  height: 500px;
}
.prev {
  margin-left: 0 !important;
}
.bread-enter,
.bread-leave-to {
  opacity: 0;
  transform: translateX(-20px);
}
.bread-enter-to,
.bread-leave- {
  opacity: 1;
  transform: translateX(0);
}
.bread-enter-active {
  transition: all 1s;
}
</style>
